<template>
  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list
      offset="10"
      finished-text="没有更多了"
      loading-text="加载中..."
      v-model:loading="pageStatus.loading"
      :finished="pageStatus.allLoaded"
      @load="setNextPage"
    >
      <template v-for="(item,index) in articleResult.data.records" :key="index">
        <div @click="skip(item.trainingArticleId)" v-if="sourceType == 'train'">
          <ArticleItem :is-read="isRecords(item.trainingArticleId)" :article-data="item" />
        </div>
        <div @click="skip(item.articleId)" v-else>
          <ArticleItem :is-read="isRecords(item.articleId)" :article-data="item" />
        </div>
      </template>
    </van-list>
  </van-pull-refresh>
</template>

<script>
import { computed, reactive, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';
import ArticleItem from '@/components/ArticleItem';

import { useService } from '@/utils/services';
import { EMPTY_PAGE_BEAN } from '@/constants/common';
import { CHANNEL } from '@/constants/business';
import { usePageLoadStatus } from '@/hooks/utils';
import { useCurrentDeptInfo } from '@/hooks/store';

import Utils from '@/utils/utils';
export default {
  components: {
    ArticleItem
  },
  setup() {
    const store = useStore();
    const route = useRoute();
    const router = useRouter();
    const categoryId = computed(() => route.query.categoryId || '').value;
    const trainingCategoryId = route.query.trainingCategoryId;
    const sourceType = route.query.sourceType;
    const departmentId = computed(() => route.query.departmentId || '');
    const title = route.query.keyWord || '';
    const employeeId = route.query.employeeId || '';

    const currentDept = useCurrentDeptInfo();

    const articleResult = reactive({
      data: EMPTY_PAGE_BEAN
    });

    const refreshing = ref(false);
    const pageStatus = usePageLoadStatus(articleResult);

    const pageParams = reactive({
      currentPage: 1,
      pageSize: 10
    });

    const actions = useService();
    function getArticle() {
      // sourceType.value == 'train'  说明是从培训中心跳进来的
      let url = sourceType == 'train' ? 'getTrainingArticleArticle' : 'getArticle';
      actions.hos[url]({
        ...pageParams,
        categoryId,
        trainingCategoryId,
        departmentId: departmentId.value || currentDept.value.departmentId,
        title,
        employeeId
      })
        .then((data) => {
          if (data.current != 1) {
            articleResult.data = {
              ...data,
              records: [...articleResult.data.records, ...data.records]
            };
          } else {
            articleResult.data = data;
          }
        })
        .finally(() => {
          refreshing.value = false;
        });
    }
    watch(
      () => [currentDept.value.departmentId, departmentId],
      () => {
        if (currentDept.value.departmentId || departmentId.value) {
          getArticle();
        }
      },
      {
        immediate: true
      }
    );

    const setNextPage = Utils.debounce(() => {
      pageParams.currentPage += 1;
      getArticle();
    });

    function onRefresh() {
      pageParams.currentPage = 1;
      getArticle();
    }

    function skip(articleId) {
      if (sourceType == 'train') {
        //培训文章
        router.push(
          `/trainArticle/${articleId}?${Utils.json2params({
            ...pageParams,
            trainingCategoryId,
            departmentId: departmentId.value || currentDept.value.departmentId,
            title,
            channel: title ? CHANNEL.SEARCH : CHANNEL.EDUCATION,
            employeeId
          })}`
        );
      } else {
        //文章
        router.push(
          `/article/${articleId}?${Utils.json2params({
            ...pageParams,
            categoryId,
            departmentId: departmentId.value || currentDept.value.departmentId,
            title,
            channel: title ? CHANNEL.SEARCH : CHANNEL.EDUCATION
          })}`
        );
      }
    }

    function isRecords(articleId) {
      return store.state.global.records.includes(articleId);
    }

    return {
      articleResult,
      pageStatus,
      setNextPage,
      onRefresh,
      refreshing,
      skip,
      isRecords,
      sourceType
    };
  }
};
</script>
